<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="50%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-container>
            <el-header>
                <el-button type="warning" @click="exportBill">导出INVOICE</el-button>
                <h2>{{marking}} INVOICE</h2>
                <div></div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="table" row-key="id" :data="data" stripe remoteSort remoteFilter border height="400" hidePagination hideDo show-summary>
                    <el-table-column width="1"></el-table-column>
                    <el-table-column type="index" width="50" align="center"></el-table-column>
                    <!-- <el-table-column label="产品名称" prop="goods.goods_name" align="center">
                        <template #default="scope">
                            {{scope.row.goods && scope.row.goods.goods_name}}
                        </template>
                    </el-table-column> -->
                    <el-table-column label="品类" prop="goods.goods_name" align="center">
                        <template #default="scope">
                            {{scope.row.goods && scope.row.goods.cate && scope.row.goods.cate.cate_name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="产品型号" align="center">
                        <template #default="scope">
                            {{scope.row.goods && scope.row.goods.goods_name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="number" align="center"></el-table-column>
                    <el-table-column label="单价" align="center">
                        <template #default="scope">
                            {{scope.row.price}}
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" prop="total_price" align="center"></el-table-column>
                    <el-table-column label="供应商" prop="apply_name" align="center"></el-table-column>
                </scTable>
            </el-main>
        </el-container>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
    props:{
        query: { type: Object, default: () => ({}) },
    },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '选择采购单',
				edit: '编辑产品',
				show: '查看' 
			},
			visible: false,
			isSaveing: false,
            data: [],
            apiObj: this.$API.procure.order.billexport,
            id: "",
            marking: "",
		}
	},
	mounted() {
        // this.getShop()
	},
	methods: {
        async exportBill(){
            var res = await this.$API.procure.order.billexport.post({id:this.id});
            console.log('res :>> ', res);
			if (res.code == 1) {
				this.$message.success("导出成功");
				window.location.href = res.data[0]
			} else {
				this.$alert(res.message, "提示", {type: "error"});
			}
        },
		// 显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单注入数据
		async setData(data) {
            this.id = data.id
            this.marking = data.marking
            this.type = data
            var res = await this.$API.procure.order.billDetail.get({id:data.id});
            this.data = res.data
		},
	}
}
</script>

<style></style>
